<template>
  <m-layout class="score-students">
    <div slot="header" class="">
      <mt-header title="班级学员">
        <m-header-back slot="left"/>
      </mt-header>
      <div class="search-wrapper">
        <mt-search v-model="searchVal" @input="handleSearch"></mt-search>
      </div>
    </div>
    <div slot="body">
      <div class="content-wrapper"
        v-if="students.list.length"
        v-infinite-scroll="handleLoadMore"
        infinite-scroll-disabled="students.loading"
        infinite-scroll-distance="50"
        infinite-scroll-immediate-check="false"
        >
        <mt-cell class="student-item"
          v-for="item in students.list"
          :key="item.studentId" is-link
          :to="{path: '/score/input-score', query: Object.assign({}, query, {studentId: item.studentId})}"
          >
          <div slot="title">
            <e-avatar :src="item.headPicture" class="student-item--avatar"/>
            {{item.studentName}}
          </div>
        </mt-cell>
      </div>
      <e-placeholder v-else class="placeholder"/>
      <div class="page-infinite-loading">
        <template v-if="!students.loading">
          <mt-spinner type="fading-circle" :size="22"></mt-spinner>
          加载中...
        </template>
        <template v-else-if="students.list.length">
          没有更多数据了
        </template>
      </div>
    </div>
  </m-layout>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      searchVal: ''
    }
  },
  computed: {
    ...mapState({
      students: state => state.score.students
    }),
    query () {
      return this.$route.query
    }
  },
  created () {
    // 初始获取路由
    if (this.query.search && !this.$first) {
      this.searchVal = this.query.search
      this.$first = true
    }
    // 非回退的进入此页面 如果list为空 则请求  反之 保留state数据
    if (!this.students.list.length) {
      this.handleSearch()
    }
  },
  beforeRouteLeave ({path}, from, next) {
    if (path === '/score/select/class') {
      // 清空数据
      this.$store.commit('score/EMPTY', {key: 'students'})
    }
    next()
  },
  methods: {
    getStudents (options = {}) {
      let query = this.query
      this.$store.dispatch('score/students', Object.assign({}, {
        orgUserId: query.orgUserId,
        testItemId: query.testContentId,
        classId: query.classId,
        page: 1, // 默认
        rows: 10 // 默认
      }, options))
    },
    handleLoadMore () {
      this.$page = this.$page ? ++this.$page : 1
      this.getStudents({
        page: this.$page
      })
    },
    handleSearch () {
      this.$page = 1
      this.getStudents({
        page: this.$page,
        searchContent: this.searchVal
      })
      // 更新路由
      this.handleChangeRouter({
        search: this.searchVal
      })
    },
    handleChangeRouter (options) {
      let {name, query} = this.$route
      this.$router.replace({
        name,
        query: Object.assign({}, query, options)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.score{
  &-students{
    .content-wrapper{
      .student-item{
        min-height: 1.3rem;
        &--avatar{
          height: .8rem;
          width: .8rem;
          border-radius: 100%;
          margin-right: .2rem;
        }
      }
    }
    .placeholder{
      background-color: #fff;
    }
  }
}
</style>
<style lang="scss">
.score{
  &-students{
    .page-infinite-loading{
      margin-top: .2rem;
      text-align: center;
      div{
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
</style>
